<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-button size="small" type="danger" @click="handleAdd">添加</el-button>
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                fixed
                prop="id"
                label="ID"
                width="150">
        </el-table-column>
        <el-table-column
                prop="number"
                label="书号"
                width="120">
        </el-table-column>
        <el-table-column
                prop="name"
                label="书名">
        </el-table-column>
        <el-table-column
                prop="author"
                label="作者">
        </el-table-column>
        <el-table-column
                prop="date"
                label="时间"
                width="120">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="250">
            <template slot-scope="scope">
                <el-button @click="handleView(scope.row,true)" type="info" size="small">查看</el-button>
                <el-button size="small" type="primary" @click="handleView(scope.row,false)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDel(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            background
            layout="prev, pager, next"
            @current-change="onPage"
            @prev-click="onPage"
            @next-click="onPage"
            :current-page.sync="pageNo"
            :page-size="pageSize"
            :total="total">
    </el-pagination>
</div>
</body>

<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./js/utils.js"></script>

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                tableData: [],
                pageSize: 2,
                pageNo: 1,
                total: 0,
                query: {}
            }
        },
        methods: {
            onPage(pageNo) {
                console.log(pageNo);
                this.pageNo = pageNo;
                this.findPageBook();
            },
            handleAdd() {
                window.location.href = "/edit.html"
            },
            handleView(row, readOnly) {
                console.log(row);
                window.location.href = "/edit.html?readOnly=" + readOnly + "&id=" + row.id
            },
            handleDel(row) {
                let id = row.id;
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 调用通过id删除方法
                    this.bookDel(id);
                    this.tableData = this.tableData.filter((item) => item.id !== id);
                });
            },
            findPageBook() {
                let url = '/book/findPageBook/' + this.pageSize + "/" + this.pageNo;
                // 特别注意这个
                var self = this;
                axios.post(url, self.query)
                    .then(function (res) {
                        console.log(res.data);
                        self.tableData = res.data.records;
                        self.total = res.data.total;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            bookDel(id) {
                let url = '/book/bookDel/' + id;
                // 特别注意这个
                var self = this;
                axios.post(url)
                    .then(function (res) {
                        self.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    })
                    .catch(function (error) {
                        self.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
            }
        },
        created() {
            // 执行列表查询，对 tableData 填充数据
            this.findPageBook();
        }
    })
</script>
</html>